<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 2400px;
        }

        #box {
            width: 1200px;
            height: 400px;
            border: 2px solid red;
            margin: 100px auto;
            overflow: hidden;
        }

        #box li {
            width: 240px;
            height: 400px;
            float: left;
        }
    </style>
    <script src="js/get.js"></script>
    <script src="js/animate.js"></script>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
    </div>

    <script>

        // 需求：鼠标移入到对应到li，li到宽度变成1000，其他li变成50；鼠标移出，所有的li都恢复240

        // 1. 获取到所有的li
        let lis = getAll('#box li');
        // console.log(lis);

        // 2. 给每个li绑定鼠标的移入和移出事件（遍历）
        lis.forEach(function (li) {
            // 2.1 鼠标移入事件
            li.onmouseover = function () {
                // 都变成50
                lis.forEach(function (item) {
                    // 判定
                    if (item === li) {
                        // 当前这个是鼠标移入的这个：变1000
                        // 让自己变成1000
                        animateSlow(item, 1000, 'width');
                    } else {
                        animateSlow(item, 50, 'width');
                    }
                });
            };

            // 2.2 鼠标移出事件
            li.onmouseout = function () {
                lis.forEach(function (item) {
                    animateSlow(item, 240, 'width');

                });
            };

            // 因为手风琴案例，很容易出现覆盖效果（一不小心经过了多个li），又是使用排他思想：之前的动画也是采用的排他（必须先动画执行完再执行下一个）：会产生冲突

            // 动画函数：需要采用动画覆盖方式来实现
        });
    </script>
</body>

</html>